﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>矫正人员月度报表</title>
<head>
<script type="text/javascript"
	src="/static/js/jquery-1.9.1.min.js"></script>
<script src="/static/js/echarts.common.min.js"></script>
 <script src="/www/js/echarts.js"></script>
</head>
	<style type="">
	div{
		margin: 0 auto;
	}
</style>
</head>
<body>
	
	<table width="100%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left"	background="/images/b2.jpg">
				<img src="/images/b1.jpg" width="10" height="26" />
			</td>
			<td width="68%" background="/images/b2.jpg">
				<table width="160" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left">
							<img src="/images/tz.gif" width="10" height="16" />
						</td>
						<td width="110" align="left" class="biao">矫正人员月度报表</td>
					</tr>
				</table>
			</td>
			<td width="31%" align="right" background="/images/b2.jpg">
				<img src="/images/b3.jpg" width="9" height="26" />
			</td>
		</tr>
	</table>
	<div style="height:40px;width:1200px"></div>
	<div id="main" style="height:500px;width:1200px"></div>
	<div><center>矫正人员月度报表-饼状图<br />(年龄情况,文化结构,犯罪类型)</center></div>
	

<script type="text/javascript">
	$(function(){
		var name;
		var value;
		$.ajax({
			url:"/echarts/view",
			dataType:'json',
			success:function(data){
				name=data.name;
				value=data.value;
				//alert(name);
				hh(name,value);
			}
	
		})
	
var hh = function(name,value){
    var dataB=[];
    var option = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:name
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : false,
        series : [
            {
                name:'访问来源',
                type:'pie',
                selectedMode: 'single',
                radius : [0, 90],
 
                x: '20%',
                width: '40%',
                funnelAlign: 'right',
                max: 1548,
 
                itemStyle : {
                    normal : {
                        label : {
                            position : 'inner'
                        },
                        labelLine : {
                            show : false
                        }
                    }
                },
                data:[
                    {value:value[0], name:name[0]},
                    {value:value[1], name:name[1]},
                    {value:value[2], name:name[2]}
                    
                ]
            },
            {
                name:'访问来源',
                type:'pie',
                radius : [120, 140],
 
                x: '60%',
                width: '35%',
                funnelAlign: 'left',
                max: 1048,
 
                data:dataB
               
            }
        ]
    };
    var data=[];
     data[0]=[
              {value:value[3], name:name[3]},
              {value:value[4], name:name[4]},
              {value:value[5], name:name[5]}
 
    ];
     data[1]=[
 
        	 {value:value[6], name:name[6]},
           	 {value:value[7], name:name[7]},
             {value:value[8], name:name[8]},
             {value:value[9], name:name[9]}
 
    ];
    data[2]=[
        	{value:value[10], name:name[10]},
           	{value:value[11], name:name[11]},
            {value:value[12], name:name[12]},
            {value:value[13], name:name[13]},
            {value:value[14], name:name[14]}
    ];
 
    // 路径配置
    require.config({
        paths: {
            echarts: '/www/js'
        }
    });
    var myChart;
    require(['echarts','echarts/chart/pie','echarts/chart/funnel'],function(echarts){
         myChart = echarts.init(document.getElementById('main'));
        // 使用刚指定的配置项和数据显示图表。
 
        myChart.setOption(option);
        // 处理点击事件并且跳转到相应的百度搜索页面
        myChart.on('click', function (params) {
 
            //console.log(params);
 
            if(params.seriesIndex==0){
                for(var i=0;i<option.series[0].data.length;i++){
                    option.series[0].data[i].selected=false;
                }
                var selected=params.data;
                selected.selected=true;
                console.log(selected);
                console.log( option.series[0].data[params.dataIndex]);
                option.series[0].data[params.dataIndex]=selected;
              //  option.series[1].data=dataB;
                option.series[1].data=data[params.dataIndex];
                console.log(option);
                myChart.clear();
                myChart.setOption(option);
            }
        });
    });
	}
		
})
</script>

<script type="text/javascript">

myChart.on('click', function (params){
	if(params.seriesIndex==0){
	      	<br>
	      }
	});
</script>
	
</body>
</html>